<template>
  <div class="Header">
    <img src="../../static/images/gerenzhongxin_beijing.png" alt class="bg-img" />
    <!-- 切换项目弹窗 -->
    <div
      @click="hidenChangeSubject"
      v-show="isShowChangeSubject"
      style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:10;background:#000;opacity:0.3;"
    ></div>
    <div v-if="isShowChangeSubject" class="change-subject">
      <div class="header">选择考试方向</div>
      <div class="content">
        <div class="row" v-for="category in subjectList">
          <div class="title">{{category.name}}</div>
          <div class="right">
            <div
              class="col"
              @click="changeCategory(item.id,item.name,category)"
              v-for="item in category.childrens"
              :class="{'active':item.id==categoryId}"
            >{{item.name}}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 评估弹框 -->
    <div
      v-show="isShowAssessment"
      class="answer-analysis-shadow"
      style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:10;background:#000;opacity:0.3;"
    ></div>
    <Assessment @close="closeAssessment" v-show="isShowAssessment"></Assessment>
    <div class="am-g es1210">
      <!-- 头像 -->
      <div class="am-u-sm-1">
        <a href="javascript:void(0);" @click="goMember">
          <img
            src="../../static/images/touxiang.jpg"
            class="am-circle user-header"
            v-if="!imagePath"
          />
          <img :src="imagePath" alt class="am-circle user-header" v-if="imagePath" />
        </a>
      </div>
      <div class="am-u-sm-10 top-cont">
        <div class="top-title">
          您好，
          {{nickname}}
          <!-- <div class="am-inline-block am-margin-left-sm">
                        <div
                            class="am-nav am-nav-pills am-margin-0 am-padding-0"
                        >
                            <div
                                class="am-dropdown am-margin-0 am-padding-0"
                                :class="{'am-active':isShowMessageDialog}"
          >-->
          <!-- 消息dialog -->
          <!-- <div
                                    class="am-dropdown-toggle small am-badge am-badge-primary newMessage "
                                    @click="tapMessageDialog"
                                >
                                    消息
                                    <span
                                        class="messageNum am-badge am-badge-danger am-round"
                                    >{{messageList.num}}</span>
          </div>-->
          <!-- 消息dialog -->
          <!-- <div
                                    class="am-dropdown-content am-padding-0 am-margin-0 dropdown"
                                    style="width: 352px; border-top: 20px solid rgba(255, 255, 255, 0);top:10px;border-left:0;"
                                    @mouseleave="leaveMessageDialog()"
                                >
                                    <div
                                        class="am-margin-0"
                                        style="color: #515151;font-size: 12px; border-bottom: 1px solid #e5e5e5;line-height: 30px;padding: 5px 20px;"
                                    >
                                        未读消息 :
                                        <template v-if="messageList.unreadNum>0">{{messageList.unreadNum}}</template>
                                        <template v-else>无</template>
                                        <span
                                            class="msgbox-mark-read"
                                            style="position: absolute;right: 20px; cursor:pointer; color: #aaa;"
                                        >忽略</span>
                                    </div>
          <ul class="am-padding-0 am-margin-vertical-xs">-->

          <!-- 消息列表 -->
          <!-- <li class="listItem listMail am-text-sm am-padding-vertical-0" data-id="114" v-for="message in messageList.list">
                                            <div class="msg-detail am-margin-left-0 am-margin-right-xs" style="position: relative; border:none;">
                                                <em class=""></em>
                                                <span class="am-margin-0 am-text-truncate am-inline-block" style="width:220px; color:#666;">
                                                    <a href="javascript:void(0);">{{message.name}}</a>
                                                </span>
                                                <span style="color: #999; position:absolute;right: 0;">{{message.date}}</span>

                                            </div>
                                        </li>
                                    </ul>
                                    <div
                                        class="am-text-right"
                                        style="background-color: #f7f7f7;border-top: 1px solid #d9d9d9;color: #515151;font-size: 12px;line-height: 20px;padding: 8px 20px;"
                                    >
                                        <a
                                            href="javascript:void(0);"
                                            style="text-decoration: none;color: #666;"
                                            @click="goMessagePage"
                                        >查看全部</a>
                                    </div>
                                </div>
                            </div>
                        </div>
          </div>-->
          <!-- 能力评估 -->
          <!-- <div style="display: inline-block;margin-left: 30px;" class="am-text-sm">
                        <a
                            type="button"
                            class="am-btn am-btn-warning am-radius am-btn-xs"
                            href="javascript:void(0);"
                            @click="openAssessmentDialog"
                        >
                            <i class="am-icon-pie-chart"></i>能力评估
          </a>-->
          <!--                <span><i class="am-icon-bookmark"></i> 签到 1 天</span>　-->
          <!--                <span><i class="am-icon-heart"></i> 学习 0小时 7分钟 </span>　|　-->
          <!-- <span style="padding-left:13px;">最近一次登录时间：1970-01-01 08:00:00</span> -->
          <!--                <span>累计登录次数： 次</span>-->
          <!-- </div> -->
        </div>
        <small class="small">
          <span class="am-badge am-badge-success am-fo">VIP1</span>
          欢迎您的到来，在岛上，遇见更好的自己！
        </small>
      </div>
      <div class="am-u-sm-1 am-padding-0 am-margin-top-sm" style="right:20px;">
        <el-dropdown style="background: #0c79b1" @command="handleCommand">
          <el-button style="background:#0e90d2;color:white;border:none;">
            个人中心
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="0">个人信息</el-dropdown-item>
            <el-dropdown-item command="1">修改密码</el-dropdown-item>
            <el-dropdown-item command="2">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="category">
      <div class="left">
        <div class="parent">
          {{subjectName}}
          <span class="el-icon-arrow-right"></span>
        </div>
        <template v-for="(category,idx) in categoryList">
          <div
            class="category-item"
            :class="{active:categoryId==category.id}"
            @click="changeCategory(category.id,category.name)"
          >{{category.name}}</div>
        </template>
      </div>
      <div class="right" @click="changeSubject">
        <div class="change">
          {{subjectName}}
          <div class="icon">
            <img
              style="width:12px;margin:-3px -6px 0 3px;transform:rotate(180deg);"
              src="../../static/images/dropdown_black.png"
              alt
            />
            <img
              style="width:12px;margin:-3px -6px 0 3px;margin-top:1px;"
              src="../../static/images/dropdown_black.png"
              alt
            />
          </div>
        </div>
        <div class="switchover">切换</div>
      </div>
    </div>
  </div>
</template>
<script>
import Assessment from "../assessment.vue";
import { clearTimeout } from "timers";
import eventBus from "../../utils/eventBus.js";
import { STATIC_ADDRESS, BASE_URL } from "@/utils/http.js";
export default {
  name: "Header",
  data() {
    return {
      subjectName: "注册会计师",
      tabindex: "",
      imagePath: "",
      isShowChangeSubject: false, //是否显示切换项目弹框
      nickname: "游客", //昵称
      isShowAssessment: false, //是否显示评估
      isShowMessageDialog: false, //是否显示消息
      categoryIdx: 0, //分类index
      categoryId: "",
      messageList: {
        num: 1,
        unreadNum: 0,
        list: [
          {
            name: "网站维护通知",
            date: "2018-05-02"
          }
        ]
      },
      categoryList: [
        //分类列表
      ],
      subjectList: [] //项目分类
    };
  },
  created() {
    // localStorage.getItem('subjectName')!=null?this.subjectName = localStorage.getItem('subjectName'):'注册会计师'
    this.categoryId = localStorage.getItem("categoryId");
    let subject = localStorage.getItem("subjectId");
    if (!this.categoryId || this.categoryId.length <= 0) {
      this.isShowChangeSubject = true;
    }
    this.getMemberInfo();
    this.getCategoryList();
  },
  components: {
    Assessment
  },
  methods: {
    handleCommand(command) {
      console.log(command);
      if (command == 2) {
        this.$post("/logout").then(res => {
          if (res.code != 200) {
            layer.msg(res.msg);
          } else {
            layer.msg("退出登录成功");
            this.$router.push("/login");
          }
        });
        return;
      }
      let routerUrl = this.$router.resolve({
        path: "/member",
        query: {
          type: command
        }
      });
      window.open(routerUrl.href, "_blank");
    },
    hidenChangeSubject() {
      this.isShowChangeSubject = false;
    },
    changeSubject() {
      //打开项目切换弹框
      this.isShowChangeSubject = true;
    },
    changeCategory(id, name, subject) {
      //切换分类
      localStorage.setItem("categoryId", id);
      localStorage.setItem("categoryName", name);
      this.categoryId = id;
      console.log(this.categoryId);
      this.timer = setTimeout(() => {
        this.isShowChangeSubject = false;
      }, 300);
      //切换subject
      if (subject) {
        localStorage.setItem("subjectId", subject.id);
        localStorage.setItem("subjectName", subject.name);
        this.subjectName = subject.name;
        this.categoryList = subject.childrens;
      }
      eventBus.$emit("requestList");
      //到个人中心
      this.$router.push({
        path: "/studyCenter"
      });
    },
    goMessagePage() {
      //到消息页面
      let routerUrl = this.$router.resolve({
        path: "/message"
      });
      window.open(routerUrl.href, "_blank");
    },
    goMember() {
      //到个人中心
      let routerUrl = this.$router.resolve({
        path: "/member"
      });
      window.open(routerUrl.href, "_blank");
    },
    // 获取个人信息
    getMemberInfo() {
      this.$get("/api/v1/members/info", {}).then(res => {
        if (res.code != 200) {
          this.$message(res.msg);
        } else {
          this.nickname = res.data.nickname;
          localStorage.setItem("nickname", res.data.nickname);
          if (res.data.sex == 0) {
            localStorage.setItem("gender", "男");
          } else if (res.data.sex == 1) {
            localStorage.setItem("gender", "女");
          } else {
            localStorage.setItem("gender", "未知");
          }
          localStorage.setItem("imagePath", res.data.imagePath);
          if (res.data.imagePath) {
            this.imagePath = STATIC_ADDRESS + "/" + res.data.imagePath;
          } else {
            this.imagePath = false;
          }
        }
      });
    },
    getCategoryList() {
      //获取分类列表
      this.$get("/api/v1/category").then(res => {
        if (res.code != 200) {
          this.$message(res.msg);
        } else {
          this.subjectList = res.data;
          // 预先赋值subject
          if (!localStorage.getItem("subjectId")) {
            console.log(localStorage.getItem("subjectId"));
            localStorage.setItem("subjectId", res.data[0].id);
            localStorage.setItem("subjectName", res.data[0].name);
            this.categoryList = res.data[0].childrens;
          } else {
            this.subjectList.forEach(sub => {
              if (sub.id == localStorage.getItem("subjectId")) {
                this.categoryList = sub.childrens;
                this.subjectName = sub.name;
              }
            });
            if (this.categoryList.length <= 0) {
              this.categoryList = res.data[0].childrens;
            }
          }
          // 预先赋值categoryList
          if (!localStorage.getItem("categoryId")) {
            localStorage.setItem("categoryId", res.data[0].childrens[0].id);
            localStorage.setItem("categoryName", res.data[0].childrens[0].name);
            this.categoryId = res.data[0].childrens[0].id;
          }
        }
      });
    },
    leaveMessageDialog() {
      //消息dialog移出事件
      this.isShowMessageDialog = false;
    },
    tapMessageDialog() {
      //显示 or 隐藏消息
      this.isShowMessageDialog = !this.isShowMessageDialog;
    },
    openAssessmentDialog() {
      //能力评估dialog显示
      this.isShowAssessment = true;
    },
    closeAssessment() {
      //子组件触发的隐藏能力评估事件
      this.isShowAssessment = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.change-subject {
  height: max-content;
  width: 457px;
  overflow: auto;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 1000;
  border: #0895ce 3px solid;
  border-radius: 12px;
  background: #f1f1f1;
  > .header {
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: white;
    font-size: 24px;
    border-radius: 10px;
    background: url(../../static/images/register/czbeijing.png) repeat-x;
    background-size: 50px 100%;
  }
  .content {
    padding: 30px;
    .row {
      padding-bottom: 10px;
      width: 100%;
      .title {
        display: inline-block;
        float: left;
      }
      .right {
        width: 280px;
        display: inline-block;
        .active {
          background: #4bb14f;
          border: none;
          color: white !important;
        }
        .col {
          margin-bottom: 10px;
          margin-left: 10px;
          border: #0393cd 1px solid;
          border-radius: 10px;
          color: #0e90d2;
          padding: 0 6px;
          cursor: pointer;
          display: inline-block;
        }
      }

      .title {
        flex-shrink: 0;
        height: 27px;
        background: #0393cd;
        color: white;
        padding: 0px 6px;
        border-radius: 6px;
        width: 110px;
        text-align: center;
      }
    }
  }
}
/* 头部样式 */
@keyframes dropdown {
  from {
    opacity: 0;
    top: -60%;
  }
  to {
    opacity: 1;
    top: 10px;
  }
}

.dropdown {
  animation: dropdown 0.3s;
}

.Header {
  .el-button--primary {
    border-color: #0c79b1 !important;
  }

  background-image: url(../../static/images/fanggebeijing.png);
  box-sizing: content-box;
  height: 110px;
  padding-top: 15px;
  padding-bottom: 80px;
  min-width: 1210px;
  position: relative;
  .category {
    width: 1210px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    font-size: 14px;
    .left,
    .right {
      display: flex;
    }

    .right {
      .switchover {
        padding: 1px 6px;
        background: #0e90d2;
        cursor: pointer;
        color: white;
        border-radius: 5px;
        font-size: 12px;
        height: 24px;
        line-height: 20px;
        margin-top: 6px;
      }
      .change {
        .icon {
          margin-top: 3px;
          display: flex;
          flex-direction: column;
          cursor: pointer;
          img {
            height: 6px;
          }
        }
        display: flex;
        justify-content: center;
        align-items: center;
        padding-right: 20px;
        margin-top: 6px;
      }
    }
    .parent {
      padding: 3px 0;
      cursor: pointer;
    }
    .category-item {
      width: auto;
      padding: 3px 10px;
      background: #ddd;
      margin-left: 20px;
      font-size: 14px;
      cursor: pointer;
    }
    .category-item.active {
      background: #0e90d2;
      color: white;
    }
  }
  .bg-img {
    width: 100%;
    position: absolute;
    height: 600px;
    top: -260px;
    z-index: -1;
  }
}

.top-cont {
  padding-left: 35px;
  color: #fff;
}

.top-title {
  margin-top: 20px;
  margin-bottom: 10px;
}

.user-header {
  width: 80px;
  height: 80px;
}
.messageNum {
  position: absolute;
  right: -15px;
  top: -10px;
}
</style>